<template>
  <OrderSeePage backname="查看入库单" orderTitle="单据信息" :loading="loading">
    <template v-slot:OrderDetail>
      <li>
        入库单号：<span>{{ info.order_sn }}</span>
      </li>
      <li>
        入库金额：<span>{{ info.money }}</span>
      </li>
      <li>
        入库状态：<span>{{ statusList[info.status] }}</span>
      </li>
      <li>
        创建时间：<span>{{
          info.created_at ? parseTime(info.created_at) : ""
        }}</span>
      </li>
    </template>
    <template v-slot:default>
      <Table>
        <template v-slot:Title> 商品列表 </template>
        <template v-slot:Table>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
          >
            <el-table-column
              label="商品名称"
              show-overflow-tooltip
              prop=""
              min-width="90"
            >
              <template slot-scope="scope"
                ><span>
                  {{ scope.row.name }}
                </span></template
              >
            </el-table-column>
            <el-table-column
              label="单位"
              show-overflow-tooltip
              prop=""
              min-width="90"
            >
              <template slot-scope="scope"
                ><span> {{ scope.row.unit }} </span></template
              >
            </el-table-column>
            <el-table-column
              label="数量"
              show-overflow-tooltip
              prop=""
              min-width="90"
            >
              <template slot-scope="scope"
                ><span>
                  {{ scope.row.num }}
                </span></template
              >
            </el-table-column>
            <el-table-column
              label="单价"
              show-overflow-tooltip
              prop="price"
              min-width="90"
            >
            </el-table-column>
            <el-table-column
              label="小计"
              show-overflow-tooltip
              prop="money"
              min-width="90"
            >
            </el-table-column>
            <el-table-column
              label="备注"
              show-overflow-tooltip
              prop="remark"
              min-width="90"
            >
            </el-table-column>
          </el-table>
        </template>
      </Table>
      <div class="main_tile boxdq marginTop10">
        <!-- <div class="main_tile_l marginLeft0"><em></em>其他</div> -->
      </div>
      <div class="main_xq">
        <!-- <ul class="boxha">
          <li class="main_w100">
            其他费用：<span>{{ info.other_money | other_money }}</span>
          </li>
          <li class="main_w100">
            备注：<span>{{ info.remark }}</span>
          </li>
          <li class="main_w100 box">
            上传的相关凭证：
            <span class="box main_xqi">
              <div
                class="main_xqi_i"
                v-for="(pics, index) in info.pics"
                :key="index"
              >
                <el-image fit="fill" :src="pics" :preview-src-list="info.pics">
                  <div slot="error" class="image-slot">
                    <img :src="puzzleImg" />
                  </div>
                </el-image>
              </div>
            </span>
          </li>
        </ul> -->
      </div>
    </template>
  </OrderSeePage>
</template>
<script>
import OrderSeePage from "@/components/OrderSeePage";
import Table from "@/components/OrderSeePage/table.vue";
import { puzzleImg } from "@/api/currency";
import {
  storage_info,
  storage_base,
} from "@/api/purchasing/purchasingPurchase";
import { parseTime } from "@/utils/index.js";
export default {
  name: "",
  components: {
    OrderSeePage,
    Table,
  },
  data() {
    return {
      puzzleImg,
      parseTime,
      id: "",
      info: {},
      list: [],
      statusList: [],
      loading: false,
    };
  },
  async created() {
    if (this.$route.params) {
      this.id = this.$route.params.id;
    }
    await this.storage_base();
    this.storage_info();
  },
  methods: {
    storage_base() {
      storage_base().then((res) => {
        if (res.errcode == 0) {
          this.statusList = res.data.statusList;
        }
      });
    },
    storage_info() {
      let data = { id: this.id };
      this.loading = true;
      storage_info(data).then((res) => {
        if (res.errcode == 0) {
          this.info = res.data.info;
          res.data.info.storage_list.map((e) => {
            e.name = e.goods.name;
            e.unit = "";
            if (e.goods_spu && e.goods_spu.spu_name) {
              e.name = `${e.name}【${e.goods_spu.spu_name.title}】`;
            }
            if (e.goods_spu && e.goods_spu.spu_unit) {
              e.unit = e.goods_spu.spu_unit.title;
            }
          });
          this.list = res.data.info.storage_list;
        } else {
          this.$message.error(res.errmsg);
        }
        this.loading = false;
      });
    },
  },
};
</script>
<style lang='scss' scoped></style>
